<template>
  <a-card :bordered="false">
    <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
      <a-row :gutter="24">
        <a-col :span="6">
          <a-form-item label="房间名称" name="roomName">
            <a-input v-model:value="searchFormState.roomName" placeholder="请输入房间名称" />
          </a-form-item>
        </a-col>
        <!-- <a-col :span="6">
          <a-form-item label="是否存在卫生间 01 存在卫生间 02 不存在卫生间" name="toilet">
            <a-input v-model:value="searchFormState.toilet" placeholder="请输入是否存在卫生间 01 存在卫生间 02 不存在卫生间" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item label="房间类型 参考：BIZ_ROOM_TYPE" name="roomType">
            <a-input v-model:value="searchFormState.roomType" placeholder="请输入房间类型 参考：BIZ_ROOM_TYPE" />
          </a-form-item>
        </a-col> -->
        <a-col :span="6">
          <a-button type="primary" @click="table.refresh(true)">查询</a-button>
          <a-button style="margin: 0 8px" @click="reset">重置</a-button>
        </a-col>
      </a-row>
    </a-form>
    <s-table ref="table" :columns="columns" :data="loadData" :alert="options.alert.show" bordered
      :row-key="(record) => record.id" :tool-config="toolConfig">
      <!-- :row-selection="options.rowSelection" -->

      <template #operator class="table-operator">
        <a-space>
          <a-button type="primary" @click="formRef.onOpen()" v-if="hasPerm('bizRoomAdd')">
            <template #icon><plus-outlined /></template>
            新增
          </a-button>
          <a-button type="primary" @click="addCateRoomType.onOpen()" v-if="hasPerm('bizRoomTypeAdd')">
            <template #icon><plus-outlined /></template>
            房间分类管理
          </a-button>
          <xn-batch-delete v-if="hasPerm('bizRoomBatchDelete')" :selectedRowKeys="selectedRowKeys"
            @batchDelete="deleteBatchBizRoom" />
        </a-space>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'state'">
          {{ record.state == 0 ? '空闲' : record.state == 1 ? '等待技师' : record.state == 2 ? '服务中'
            : record.state == 3 ? '客人休息' : record.state == 4 ? '脏房' : record.state == 5 ? '有预约' : record.state == 6 ? '维修' :
              ''
          }}
        </template>
        <template v-if="column.dataIndex === 'toilet'">
          {{ record.toilet == 1 ? '存在卫生间' : record.state == 2 ? '不存在卫生间' : ''}}
        </template>
        <template v-if="column.dataIndex === 'roomType'">
          {{ cateDataSource.length && getHandType(record) }}
        </template>
        <template v-if="column.dataIndex === 'action'">
          <a-space>
            <a @click="formRef.onOpen(record)" v-if="hasPerm('bizRoomEdit')">编辑</a>
            <a-divider type="vertical" v-if="hasPerm(['bizRoomEdit', 'bizRoomDelete'], 'and')" />
            <a-popconfirm title="确定要删除吗？" @confirm="deleteBizRoom(record)">
              <a-button type="link" danger size="small" v-if="hasPerm('bizRoomDelete')">删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </template>
    </s-table>
  </a-card>
  <Form ref="formRef" :cateDataSource="cateDataSource" @successful="table.refresh(true)" />
  <AddCateRoomType ref="addCateRoomType" />
</template>

<script setup name="room">
import bizRoomTypeApi from '@/api/biz/bizRoomTypeApi'
import Form from './form.vue'
import AddCateRoomType from './addCateRoomType.vue'
import bizRoomApi from '@/api/biz/bizRoomApi'
const addCateRoomType = ref()
let searchFormState = reactive({})
const searchFormRef = ref()
const table = ref()
const formRef = ref()
const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
const columns = [
  {
    title: '房间名称',
    dataIndex: 'roomName'
  },
  {
    title: '房间状态',
    dataIndex: 'state'
    // 00 空闲  01 等待技师 02 访问中 03 客人休息 04 脏房 05 有预约 06 维修
  },
  {
    title: '是否存在卫生间',
    dataIndex: 'toilet'
    //  01 存在卫生间 02 不存在卫生间
  },
  {
    title: '房间类型',
    dataIndex: 'roomType'
    // 参考：BIZ_ROOM_TYPE
  },
  // {
  //   title: '设备ID',
  //   dataIndex: 'deviceId'
  // },
  {
    title: '床位数量',
    dataIndex: 'bedNum'
  },
  // {
  //   title: 'Mac地址',
  //   dataIndex: 'macAddress'
  // },
  {
    title: '备注',
    dataIndex: 'remark'
  },
]
// 操作栏通过权限判断是否显示
if (hasPerm(['bizRoomEdit', 'bizRoomDelete'])) {
  columns.push({
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    width: '150px'
  })
}
const selectedRowKeys = ref([])
// 列表选择配置
const options = {
  // columns数字类型字段加入 needTotal: true 可以勾选自动算账
  alert: {
    show: true,
    clear: () => {
      selectedRowKeys.value = ref([])
    }
  },
  rowSelection: {
    onChange: (selectedRowKey, selectedRows) => {
      selectedRowKeys.value = selectedRowKey
    }
  }
}
const loadData = (parameter) => {
  const searchFormParam = JSON.parse(JSON.stringify(searchFormState))
  return bizRoomApi.bizRoomPage(Object.assign(parameter, searchFormParam)).then((data) => {
    return data
  })
}
let cateDataSource = ref([])
const loadRoomTypeData = (parameter) => {
  return bizRoomTypeApi.bizRoomTypePage(parameter).then((data) => {
    cateDataSource.value = data.records
  })
}
loadRoomTypeData()
// 重置
const reset = () => {
  searchFormRef.value.resetFields()
  table.value.refresh(true)
}
// 删除
const deleteBizRoom = (record) => {
  let params = [
    {
      id: record.id
    }
  ]
  bizRoomApi.bizRoomDelete(params).then(() => {
    table.value.refresh(true)
  })
}
// 批量删除
const deleteBatchBizRoom = (params) => {
  bizRoomApi.bizRoomDelete(params).then(() => {
    table.value.clearRefreshSelected()
  })
}
const getHandType = (record) => {
	let result = ''
	cateDataSource.value.map(v => {
		if(v.roomType == record.roomType){
			result =  v.typeName
		}
	})
	return result
}
</script>
